<template>
	<view class="rating-container">
		<view v-for="(item, index) in evaluationItems" :key="index" class="rating-item" @click="handleStarClick(index)"
			:class="{ selected: item.selected }">
			<image :src="item.selected ? $IMG_URL('/static/evaluate/eva2.png') : $IMG_URL('/static/evaluate/eva1.png')"
				class="rating-image" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Number,
				default: 0
			},
			max: {
				type: Number,
				default: 5
			},
			 disabled: {
			      type: Boolean,
			      default: false
			    }
		},
		data() {
			return {
				evaluationItems: []
			};
		},
		watch: {
			value(newVal) {
				console.log('newVal', newVal);
				if(!this.disabled){
					this.updateStars(newVal);
				}
				
			}
		},
		mounted() {
			this.updateStars(this.value);
		},
		methods: {
			updateStars(value) {
				this.evaluationItems = Array.from({
					length: this.max
				}, (_, i) => ({
					selected: i < value
				}));
			},
			handleStarClick(index) {
				const newValue = index + 1;
				this.$emit('input', newValue);
			}
		}
	};
</script>

<style scoped>
	.rating-container {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.rating-item {
		
	}

	.rating-image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}

	.selected .rating-image {
		/* 如果需要，可以在这里添加选中状态的样式 */
	}
</style>